<template>
    <div>
        <el-form :inline="true" ref="useRecordFormRef" :model="useRecordForm" class="demo-form-inline" size="medium">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="空间分类" prop="classification">
                        <el-select v-model="useRecordForm.classification" placeholder="请选择空间">
                            <el-option v-for="item in spatialClassificationList" :key="item.id"
                                :label="item.spatialClassification" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="空间" prop="spaceName">
                        <el-select v-model="useRecordForm.spaceName" placeholder="活动区域">
                            <el-option v-for="item in space" :label="item.spaceName" :key="item.id"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="预约日期" prop="appointmentDate">
                        <el-date-picker v-model="useRecordForm.appointmentDate" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-button @click="queryBtn">查 询</el-button>
                        <el-button @click="resetForm">重 置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="recordListTable" style="width: 100%">
            <el-table-column type="index" label="序号" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="status" label="状态">
            </el-table-column>
            <el-table-column prop="classification" label="所属分类">
            </el-table-column>
            <el-table-column prop="spaceName" label="空间名称">
            </el-table-column>
            <el-table-column prop="appointmentDate" label="预约日期">
            </el-table-column>
            <el-table-column prop="appointmentTime" label="预约时间">
            </el-table-column>
            <el-table-column prop="appointmentNumber" label="预约人数">
            </el-table-column>

            <el-table-column prop="appointmentPerson" label="预约人">
            </el-table-column>
            <el-table-column prop="applicationTime" label="申请时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="detailInformation(scope.row)" type="text">详 情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.showApage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageNum"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 分页
            pagination: {
                // 显示第几页
                showApage: 1,
                // 总条数
                total: 50,
                // 每页显示多少条
                pageNum: 10,
            },
            // 查询表单的
            useRecordForm: {
                // 空间分类
                classification: '',
                // 空间名称
                spaceName: '',
                // 预约日期
                appointmentDate: ''

            },
            space: [
                {
                    id: 1,
                    spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    spaceName: '图书馆1'
                },
                {
                    id: 2,
                    spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    spaceName: '图书馆2'
                },
                {
                    id: 3,
                    spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    spaceName: '图书馆3'
                },
            ],
            // 空间分类列表
            spatialClassificationList: [
                {
                    id: 1,
                    spatialClassification: "图书馆",
                    space: [
                        {
                            id: 1,
                            spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                            spaceName: '图书馆1'
                        },
                        {
                            id: 2,
                            spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                            spaceName: '图书馆2'
                        },
                        {
                            id: 3,
                            spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                            spaceName: '图书馆3'
                        },
                    ]
                },
                {
                    id: 2,
                    spatialClassification: "实验室",
                    space: [
                        {
                            id: 1,
                            spaceImgUrl: 'https://imgs.699pic.com/images/500/474/567.jpg!detail.v1',
                            spaceName: '实验室1'
                        },
                        {
                            id: 2,
                            spaceImgUrl: 'https://imgs.699pic.com/images/500/474/567.jpg!detail.v1',
                            spaceName: '实验室2'
                        },
                        {
                            id: 3,
                            spaceImgUrl: 'https://imgs.699pic.com/images/500/474/567.jpg!detail.v1',
                            spaceName: '实验室3'
                        },
                    ]
                },
            ],
            // 使用记录table
            recordListTable: [{
                // 使用状态
                status: '使用中',
                // 所属分类
                classification: '图书馆',
                // 空间名称
                spaceName: '图书馆1',
                // 预约日期
                appointmentDate: '2023-04-21',
                // 预约时间
                appointmentTime: '08:00-10:00',
                // 预约人数
                appointmentNumber: '5人',
                // 预约人
                appointmentPerson: '张三',
                // 申请时间
                applicationTime: '2024-04-15 15:28:15'
            }, {
                status: '待评价',
                classification: '图书馆',
                spaceName: '图书馆2',
                appointmentDate: '2023-04-21',
                appointmentTime: '08:00-10:00',
                appointmentNumber: '5人',
                appointmentPerson: '李四',
                applicationTime: '2024-04-15 15:28:15'
            }, {
                status: '待评价',
                classification: '实验室',
                spaceName: '实验室2',
                appointmentDate: '2023-04-21',
                appointmentTime: '08:00-10:00',
                appointmentNumber: '5人',
                appointmentPerson: '李四',
                applicationTime: '2024-04-15 15:28:15'
            }, {
                status: '待评价',
                classification: '实验室',
                spaceName: '实验室2',
                appointmentDate: '2023-04-21',
                appointmentTime: '08:00-10:00',
                appointmentNumber: '5人',
                appointmentPerson: '李四',
                applicationTime: '2024-04-15 15:28:15'
            }, {
                status: '待评价',
                classification: '实验室',
                spaceName: '实验室2',
                appointmentDate: '2023-04-21',
                appointmentTime: '08:00-10:00',
                appointmentNumber: '5人',
                appointmentPerson: '李四',
                applicationTime: '2024-04-15 15:28:15'
            }, {
                status: '待评价',
                classification: '实验室',
                spaceName: '实验室2',
                appointmentDate: '2023-04-21',
                appointmentTime: '08:00-10:00',
                appointmentNumber: '5人',
                appointmentPerson: '李四',
                applicationTime: '2024-04-15 15:28:15'
            },
            ]
        }
    },
    methods: {
        detailInformation(e) {
            console.log(e);
        },
        // 不足两位数 补0操作
        indexMethod(index) {
            return (index + 1).toString().padStart(2, '0');
        },
        queryBtn() {
            console.log(this.useRecordForm);
            // this.useRecordForm 拿到数据发请求
        },
        resetForm() {
            this.$refs.useRecordFormRef.resetFields()
        },
        // 每页条数
        handleSizeChange(e) {
            this.pagination.pageNum = e
            // 重新掉一下数据
        },
        // 当前第几页
        handleCurrentChange(val) {
            this.pagination.showApage = val
            // 重新掉一下数据
        },
    },
}
</script>

<style lang="less" scoped>
</style>